<template>
	<div class="five-zodiac-table">
		<div class="p-5 bg-light-teal">
			<table class="width100 font16 text-center" style="word-break: break-all" cellspacing="0" border="1"
				bordercolor="#00ff00">
				<tbody>
					<tr>
						<td>五行</td>
						<td colspan="2">号码(每年按立春后开始变化号码)</td>
						<td colspan="12">2024年生肖对照表</td>
					</tr>
					<tr v-for="(item, index) of data.tableData" :key="item.id" class="font-bolder">
						<td>
							{{ item.zodiac }}
						</td>
						<template v-if="index < data.tableData.length - 1">
							<td colspan="2">
								{{ item.code }}
							</td>
						</template>
						<template v-else>
							<td>
								{{ item.zodiacMin }}
							</td>
							<td>
								{{ item.zodiacMax }}
							</td>
						</template>
						<td :class="
                redWaves.includes(item.rat)
                  ? 'red'
                  : blueWaves.includes(item.rat)
                  ? 'blue'
                  : greenWaves.includes(item.rat)
                  ? 'green'
                  : ''
              ">
							{{ item.rat }}
						</td>
						<td :class="
                redWaves.includes(item.cattle)
                  ? 'red'
                  : blueWaves.includes(item.cattle)
                  ? 'blue'
                  : greenWaves.includes(item.cattle)
                  ? 'green'
                  : ''
              ">
							{{ item.cattle }}
						</td>
						<td :class="
                redWaves.includes(item.tiger)
                  ? 'red'
                  : blueWaves.includes(item.tiger)
                  ? 'blue'
                  : greenWaves.includes(item.tiger)
                  ? 'green'
                  : ''
              ">
							{{ item.tiger }}
						</td>
						<td :class="
                redWaves.includes(item.rabbit)
                  ? 'red'
                  : blueWaves.includes(item.rabbit)
                  ? 'blue'
                  : greenWaves.includes(item.rabbit)
                  ? 'green'
                  : ''
              ">
							{{ item.rabbit }}
						</td>
						<td :class="
                redWaves.includes(item.dragon)
                  ? 'red'
                  : blueWaves.includes(item.dragon)
                  ? 'blue'
                  : greenWaves.includes(item.dragon)
                  ? 'green'
                  : ''
              ">
							{{ item.dragon }}
						</td>
						<td :class="
                redWaves.includes(item.snake)
                  ? 'red'
                  : blueWaves.includes(item.snake)
                  ? 'blue'
                  : greenWaves.includes(item.snake)
                  ? 'green'
                  : ''
              ">
							{{ item.snake }}
						</td>
						<td :class="
                redWaves.includes(item.horse)
                  ? 'red'
                  : blueWaves.includes(item.horse)
                  ? 'blue'
                  : greenWaves.includes(item.horse)
                  ? 'green'
                  : ''
              ">
							{{ item.horse }}
						</td>
						<td :class="
                redWaves.includes(item.sheep)
                  ? 'red'
                  : blueWaves.includes(item.sheep)
                  ? 'blue'
                  : greenWaves.includes(item.sheep)
                  ? 'green'
                  : ''
              ">
							{{ item.sheep }}
						</td>
						<td :class="
                redWaves.includes(item.monkey)
                  ? 'red'
                  : blueWaves.includes(item.monkey)
                  ? 'blue'
                  : greenWaves.includes(item.monkey)
                  ? 'green'
                  : ''
              ">
							{{ item.monkey }}
						</td>
						<td :class="
                redWaves.includes(item.chicken)
                  ? 'red'
                  : blueWaves.includes(item.chicken)
                  ? 'blue'
                  : greenWaves.includes(item.chicken)
                  ? 'green'
                  : ''
              ">
							{{ item.chicken }}
						</td>
						<td :class="
                redWaves.includes(item.dog)
                  ? 'red'
                  : blueWaves.includes(item.dog)
                  ? 'blue'
                  : greenWaves.includes(item.dog)
                  ? 'green'
                  : ''
              ">
							{{ item.dog }}
						</td>
						<td :class="
                redWaves.includes(item.pig)
                  ? 'red'
                  : blueWaves.includes(item.pig)
                  ? 'blue'
                  : greenWaves.includes(item.pig)
                  ? 'green'
                  : ''
              ">
							{{ item.pig }}
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="bg-light-teal p-5 p-t10 font16 border-bottom">
			以下特码生肖属性表：
		</div>
		<div class="p-5 border-bottom">
			<table class="width100 border font14 text-center" style="word-break: break-all">
				<tbody>
					<tr class="bg-light-red p-t10 p-b10 blue">
						<td class="font-bolder">左右肖</td>
						<td colspan="2">
							<div class="flex">
								<div class="width50">左肖：鼠牛龙蛇猴鸡</div>
								<div class="width50">右肖：虎兔马羊狗猪</div>
							</div>
						</td>
						<td class="font-bolder">独合肖</td>
						<td colspan="2">
							<div class="flex">
								<div class="width50">独字肖：鼠牛虎兔马羊</div>
								<div class="width50">合字肖：龙蛇猴鸡狗猪</div>
							</div>
						</td>
					</tr>
					<tr class="p-t10 p-b10 red">
						<td class="font-bolder">前后肖</td>
						<td colspan="2">
							<div class="flex">
								<div class="width50">前肖：鼠牛虎兔龙蛇</div>
								<div class="width50">后肖：马羊猴鸡狗猪</div>
							</div>
						</td>
						<td class="font-bolder">阴阳肖</td>
						<td colspan="2">
							<div class="flex">
								<div class="width50">阴肖：鼠龙马蛇狗猪</div>
								<div class="width50">阳肖：鸡兔牛羊虎猴</div>
							</div>
						</td>
					</tr>
					<tr class="bg-light-red p-t10 p-b10 green">
						<td class="font-bolder">天地肖</td>
						<td colspan="2">
							<div class="flex">
								<div class="width50">天肖：兔马猴猪牛龙</div>
								<div class="width50">地肖：蛇羊鸡狗鼠虎</div>
							</div>
						</td>
						<td class="font-bolder">家野肖</td>
						<td colspan="2">
							<div class="flex">
								<div class="width50">野兽：猴蛇龙兔虎鼠</div>
								<div class="width50">家畜：羊马牛猪狗鸡</div>
							</div>
						</td>
					</tr>
					<tr class="p-t10 p-b10 red">
						<td class="font-bolder">单双笔</td>
						<td colspan="2">
							<div class="flex">
								<div class="width50">单笔划肖:鼠龙蛇马鸡猪</div>
								<div class="width50">双笔划肖:牛虎兔羊猴狗</div>
							</div>
						</td>
						<td class="font-bolder">美丑肖</td>
						<td colspan="2">
							<div class="flex">
								<div class="width50">吉美：兔龙蛇马羊鸡</div>
								<div class="width50">凶丑：鼠牛虎猴狗猪</div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="bg-light-teal p-5 font16 border-bottom">以下生肖代号表：</div>
		<div class="p-5 border-bottom">
			<table class="width100 border font14 text-center" style="word-break: break-all">
				<tbody>
					<tr class="bg-light-red p-t10 p-b10" style="background: #ffccff">
						<td class="font-bolder">鼠</td>
						<td>国师、叛贼、神偷、叛贼、梅花</td>
						<td class="font-bolder">牛</td>
						<td>无帅、大将、员外、大将、荷花</td>
						<td class="font-bolder">虎</td>
						<td>大将、大王、武士、都督、桃花</td>
					</tr>
					<tr class="bg-light-red p-t10 p-b10" style="background: #ccccff">
						<td class="font-bolder">兔</td>
						<td>玉帝、东宫、小姐、东宫、兰花</td>
						<td class="font-bolder">龙</td>
						<td>皇帝、状元、皇帝、上帝、梨花</td>
						<td class="font-bolder">蛇</td>
						<td>宫女、才人、美女、太子、竹花</td>
					</tr>
					<tr class="bg-light-red p-t10 p-b10" style="background: #cc99ff">
						<td class="font-bolder">马</td>
						<td>太子、元帅、秀才、太子、杏花</td>
						<td class="font-bolder">羊</td>
						<td>相将、西宫、夫人、西宫、樱花</td>
						<td class="font-bolder">猴</td>
						<td>太监、寇王、游侠、寇王、松树</td>
					</tr>
					<tr class="bg-light-red p-t10 p-b10" style="background: #ffccff">
						<td class="font-bolder">鸡</td>
						<td>东宫、贵妃、歌女、贵妃、苓花</td>
						<td class="font-bolder">狗</td>
						<td>文官、先锋、管家、先锋、菊花</td>
						<td class="font-bolder">猪</td>
						<td>西宫、太监、商贾、太监、桂花</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="bg-light-teal p-5 font16 border-bottom">
			五行生肖属性 与 三合肖六合肖属性：
		</div>
		<div class="flex border-bottom font14">
			<div class="font-bolder blue border-right p-5">五行肖</div>
			<div class="p-5">
				五行生肖属性：<span class="pink">【金肖】</span>猴鸡
				<span class="pink">【木肖】</span>虎兔
				<span class="pink">【水肖】</span>鼠猪
				<span class="pink">【火肖】</span>蛇马
				<span class="pink">【土肖】</span>牛羊龙狗
			</div>
		</div>
		<div class="flex border-bottom font14">
			<div class="font-bolder red border-right p-5">三六合</div>
			<div class="p-5">
				<span class="pink">三合生肖</span>：鼠龙猴、牛蛇鸡、虎马狗、兔羊猪。　<span class="pink">六合生肖</span>：鼠牛、龙鸡、虎猪、蛇猴、兔狗、马羊
			</div>
		</div>
		<div class="bg-light-teal p-5 font14 border-bottom">
			四季生肖属性：【<span class="pink">春天生肖</span>：虎兔龙，
			<span class="pink">夏天生肖</span>：蛇马羊，秋天生肖：猴狗鸡，
			<span class="pink">冬天生肖</span>：鼠牛猪。】
		</div>
		<div class="p-5 font14 border-bottom">
			十二代号属性：【<span class="pink">两大君王</span>：龙 虎　
			<span class="pink">两大恶人</span>：鼠猴　<span class="pink">四大美女</span>：兔蛇羊 鸡 　<span class="pink">四大家臣</span>：牛马猪狗】
		</div>
		<div class="p-5 font14 text-center">
			<img src="../../assets/home/foot_ad.gif" alt="foot_ad">
		</div>
	</div>
</template>
<script setup>
	import {
		reactive,
		defineProps,
		onMounted
	} from "vue";
	import {
		getApiFiveZodiacData
	} from "@/api/api";
	const props = defineProps({
		redWaves: {
			type: Array,
			default: () => [],
		},
		blueWaves: {
			type: Array,
			default: () => [],
		},
		greenWaves: {
			type: Array,
			default: () => [],
		},
	});
	const data = reactive({
		tableData: [],
	});
	onMounted(() => {
		getTableData()
	})
	const getTableData = () => {
		getApiFiveZodiacData().then(res => {
			data.tableData = [...res]
		})
	}
</script>
<style lang="less" scoped>
	.five-zodiac-table {
		border: 1px solid #00ff00;
	}

	.border-bottom {
		border-bottom: 1px solid #00ff00;
	}

	.border-right {
		border-right: 1px solid #00ff00;
	}
</style>